<template>
    <div class="app-container">
      <el-tabs v-model="activeName">
        <el-tab-pane label="广告展示错误统计" name="show_error">
          <div class="filter-container">

            <el-select
              v-model="listQuery.query_type"
              style="width: 150px"
              class="filter-item"
              @change="handleFilter"
            >
              <el-option label="实时" :value="'1'" />
              <el-option label="历史" :value="''" />
            </el-select>

            <el-date-picker
                v-if="listQuery.query_type != '1'"
                v-model="listQuery.date"
                type="date"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
                placeholder="选择日期">
              </el-date-picker>
            <el-select
              v-if="listQuery.query_type != '1'"
              v-model="listQuery.pkg"
              style="width: 150px"
              class="filter-item"
            >
              <el-option label="全部包" :value="''" />
              <el-option v-for="(v, k) in pkgs" :key="k" :label="v" :value="k" />
              
            </el-select>
            <el-select
              v-if="listQuery.query_type != '1'"
                v-model="listQuery.brand"
                clearable
                filterable
                style="width: 150px"
                class="filter-item"
                placeholder="厂商"
              >
              <el-option key="100" label="所有厂商" value=""></el-option>
              <el-option
                v-for="(v, k, index) in brand"
                :key="index"
                :label="v"
                :value="k"
              />
            </el-select>
            <el-input
              v-if="listQuery.query_type != '1'"
              v-model="listQuery.error_reason"
              placeholder="请输入错误详情"
              style="width: 220px;"
              class="filter-item"
              @keyup.enter.native="handleFilter"
            />
            <el-button
            plain size="small"
              v-waves
              class="filter-item"
              type="primary"
              icon="el-icon-search"
              @click="handleFilter"
            >搜索</el-button>

            <el-button
            plain size="small"
              v-waves
              class="filter-item btn"
              type="primary"
              icon="el-icon-refresh"
              @click="handleCancel"
            >重置</el-button>
            </div>

            <el-table
            :key="tableKey"
            v-loading="listLoading"
            :data="list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
            :default-sort = "{prop: 'sum', order: 'descending'}"
            >
            <!-- <el-table-column label="id" min-width="50" align="center">
              <template slot-scope="{row}">
                <span>{{ row.err_id }}</span>
              </template>
            </el-table-column> -->
            <el-table-column label="包" min-width="80" align="center">
              <template slot-scope="{row}">
                <span>{{ pkgs[row.pkg]}}</span>
              </template>
            </el-table-column>
            <el-table-column label="厂商" min-width="" align="center">
              <template slot-scope="{row}">
                <span>{{ row.brand }}</span> 
              </template>
            </el-table-column>
            <!-- <el-table-column label="渠道" min-width="" align="center">
              <template slot-scope="{row}">
                <span>{{ row.channel_id }}</span> 
              </template>
            </el-table-column> -->
            <!-- <el-table-column label="广告位" min-width="" align="center">
              <template slot-scope="{row}">
                <span>{{ row.adv_space }}</span> 
              </template>
            </el-table-column>
            <el-table-column label="广告ID" min-width="80" align="center">
              <template slot-scope="{row}">
                <span>{{ row.advert_id }}</span>
              </template>
            </el-table-column> -->

            <!-- <el-table-column label="设备ID" min-width="" align="center">
              <template slot-scope="{row}">
                <span>{{ row.device_id }}</span> 
              </template>
            </el-table-column> -->


            <el-table-column label="错误详情" min-width="80" align="center">
              <template slot-scope="{row}">
                <span>{{ row.error_reason }}</span> 
              </template>
            </el-table-column>


            <el-table-column label="客户端版本" min-width="80" align="center">
              <template slot-scope="{row}">
                <span>{{ row.version }}</span> 
              </template>
            </el-table-column>

            <el-table-column label="错误数量" prop="sum" sortable min-width="" align="center">
            </el-table-column>

            <el-table-column label="创建时间" min-width="" align="center">
              <template slot-scope="{row}">
                <span>{{ row.create_time }}</span>
              </template>
            </el-table-column>

            </el-table>

            <pagination
              v-show="total > 0"
              :total="total"
              class="pageShow"
              :page.sync="listQuery.page"
              :limit.sync="listQuery.limit"
              @pagination="getList"
            />
        </el-tab-pane>

        <el-tab-pane label="广告展示错误详情" name="show_error_info">
          <div class="filter-container">

            <el-date-picker
                v-model="listQuery2.date"
                type="date"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
                placeholder="选择日期">
              </el-date-picker>
            <el-select
              v-model="listQuery2.pkg"
              style="width: 150px"
              class="filter-item"
            >
              <el-option label="全部包" :value="''" />
              <el-option v-for="(v, k) in pkgs" :key="k" :label="v" :value="k" />
              
            </el-select>
            <el-select
                v-model="listQuery2.brand"
                clearable
                filterable
                style="width: 150px"
                class="filter-item"
                placeholder="厂商"
              >
              <el-option key="100" label="所有厂商" value=""></el-option>
              <el-option
                v-for="(v, k, index) in brand"
                :key="index"
                :label="v"
                :value="k"
              />
            </el-select>

            <el-select
              v-model="listQuery2.adv_space"
              style="width: 120px"
              class="filter-item"
            >
              <el-option label="全部广告位" value="" />
              <el-option v-for="(v, k) in adv_space" :key="k" :label="v" :value="k" />
            </el-select>

            <el-select
              v-model="listQuery2.adv_type"
              style="width: 120px"
              class="filter-item"
            >
              <el-option label="全部类型" value="" />
              <el-option v-for="(v, k) in adv_type" :key="k" :label="v" :value="k" />
            </el-select>

            <el-input
              v-model="listQuery2.error_reason"
              placeholder="请输入错误详情"
              style="width: 220px;"
              class="filter-item"
              @keyup.enter.native="handleFilter2"
            />
            <el-input
              v-model="listQuery2.advert_id"
              placeholder="请输入广告id"
              style="width: 220px;"
              class="filter-item"
              @keyup.enter.native="handleFilter2"
            />
            <el-input
              v-model="listQuery2.oaid"
              placeholder="请输入设备id"
              style="width: 220px;"
              class="filter-item"
              @keyup.enter.native="handleFilter2"
            />
            <el-button
            plain size="small"
              v-waves
              class="filter-item"
              type="primary"
              icon="el-icon-search"
              @click="handleFilter2"
            >搜索</el-button>

            <el-button
            plain size="small"
              v-waves
              class="filter-item btn"
              type="primary"
              icon="el-icon-refresh"
              @click="handleCancel2"
            >重置</el-button>
            </div>
            <div>
              <span>总数量： {{ show_error_total }}</span>
            </div>
            <el-table
            :key="123"
            v-loading="listLoading"
            :data="show_error_list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
            >
            <el-table-column label="设备id" min-width="50" align="center">
              <template slot-scope="{row}">
                <span>{{ row.device_id }}</span>
              </template>
            </el-table-column>
            <el-table-column label="包" min-width="80" align="center">
              <template slot-scope="{row}">
                <span>{{ pkgs[row.pkg]}}</span>
              </template>
            </el-table-column>
            <el-table-column label="厂商" min-width="" align="center">
              <template slot-scope="{row}">
                <span>{{ row.brand }}</span> 
              </template>
            </el-table-column>
            <el-table-column label="渠道" min-width="" align="center">
              <template slot-scope="{row}">
                <span>{{ row.channel_id }}</span> 
              </template>
            </el-table-column>
            <el-table-column label="广告位" min-width="" align="center">
              <template slot-scope="{row}">
                <span>{{ adv_space[row.adv_space] }}</span> 
              </template>
            </el-table-column>
            <el-table-column label="广告类型" min-width="80" align="center">
              <template slot-scope="{row}">
                <span>{{ adv_type[row.advert_type] || '--' }}</span> 
              </template>
            </el-table-column>
            <el-table-column label="广告ID" min-width="80" align="center">
              <template slot-scope="{row}">
                <span>{{ row.advert_id }}</span>
              </template>
            </el-table-column>

            <el-table-column label="错误详情" min-width="80" align="center">
              <template slot-scope="{row}">
                <span>{{ row.error_reason }}</span> 
              </template>
            </el-table-column>

            <el-table-column label="客户端版本" min-width="80" align="center">
              <template slot-scope="{row}">
                <span>{{ row.version }}</span> 
              </template>
            </el-table-column>

            <el-table-column label="创建时间" min-width="" align="center">
              <template slot-scope="{row}">
                <span>{{ row.create_time }}</span>
              </template>
            </el-table-column>

            </el-table>

            <pagination
            v-show="show_error_total > 0"
            :total="show_error_total"
            class="pageShow"
            :page.sync="listQuery2.page"
            :limit.sync="listQuery2.limit"
            @pagination="getShowInfo"
            />
        </el-tab-pane>
      </el-tabs>

    </div>
  </template>
  
  <script>
  import {
    getAdvShowError,
    getAdvShowInfoError,
    getPkgList
  } from "@/api/adv_admin/config";
  // import {
  //   quickLogin,
  // } from "@/api/admin/control";addProxyOrqudao
  import waves from "@/directive/waves"; // waves directive
  import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
  import { Message } from "element-ui";
  import {brand1 ,adv_space, adv_type} from '@/utils/index'
  
  export default {
    name: "Control",
    components: { Pagination },
    directives: { waves },
    data() {
      return {
        activeName: 'show_error',
        brand: brand1,
        adv_space,
        adv_type,
        tableKey: 0,
        list: null,
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 20,
          pkg: "",
          message: "",
          date:'',
          brand:"",
          query_type: '1'
        },
        error_type: {},
        pkgs: {},
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
        },
        // 广告请求错误详情
        listQuery2: {
          page: 1,
          limit: 20,
          pkg: "",
          error_reason: "",
          brand:"",
          advert_id: '',
          date: '',
          oaid: '',
          adv_space: '',
          adv_type: ''
        },
        show_error_list: [],
        show_error_total: 0
      };
    },
    created() {
      this.getPkgs()
      this.getList();
    //   this.setDialogWidth();
    },
    mounted() {
      window.onresize = () => {
        return (() => {
          this.setDialogWidth();
        })();
      };
    },
    methods: {
      setDialogWidth() {
        const val = document.body.clientWidth;
        const def = 600; // 默认宽度
        if (val < def) {
          this.dialogWidth = "100%";
        } else {
          this.dialogWidth = def + "px";
        }
      },
      getPkgs(){
        getPkgList().then((res)=>{
          this.pkgs = res.DATA.list
        })
      },
      getList() {
        this.listLoading = true;
        getAdvShowError(this.listQuery).then((response) => {
          this.list = response.DATA.list;
          this.total = response.DATA.total;
          this.listLoading = false;
        });
      },
      handleFilter() {
        this.listQuery.page = 1;
        this.getList();
      },
      handleCancel(){
        this.listQuery = {
          page: 1,
          limit: 20,
          pkg: "",
          brand: "",
          message: "",
          query_type: '1'
        }
        this.getList()
      },
      // 广告展示错误详情
      handleFilter2() {
        this.listQuery.page = 1;
        this.getShowInfo();
      },
      handleCancel2(){
        this.listQuery2 = {
          page: 1,
          limit: 20,
          pkg: "",
          error_reason: "",
          brand:"",
          advert_id: '',
          date: '',
          oaid: '',
          adv_space: '',
          adv_type: ''
        }
        this.getShowInfo()
      },
      getShowInfo(){
        this.listLoading = true;
        getAdvShowInfoError(this.listQuery2).then((response) => {
          this.show_error_list = response.DATA.list;
          this.show_error_total = response.DATA.total;
          this.listLoading = false;
        });
      }
    }
  };
  </script>
  
  <style lang="scss" scoped>
  .show-pwd {
    position: absolute;
    right: 10px;
    top: 0;
    font-size: 16px;
    color: #ccc;
    cursor: pointer;
    user-select: none;
  }
  .push {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    margin-left: 5px;
  }
  .pageHidden {
    display: none;
  }
  .btn {
    margin-left: 0;
  }
  .fullwidth {
    width: 450px;
    margin-left: 50px;
  }
  @media (max-width: 550px) {
    .pageShow {
      display: none;
    }
    .pageHidden {
      display: block;
    }
    .fullwidth {
      width: 100%;
      margin-left: 0;
    }
  }
  </style>
  